<%@page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-common/taglibs.jsp" />
<c:set var="menu" value="client" scope="request" />

<html>
<head>
<title>Clients</title>
<script type="text/javascript">
   $(document).ready(function () {
      makeCenter2("ajax-loader");
      $('#ajax-loader').hide();
   });
   
   function openDeleteDiaglog() {
      $("#dialog-confirm").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         width: 300,
         buttons: {
            "Delete item": function() {
               deleteClient();
   			},
   			Cancel: function() {
   				$(this).dialog("close");
   			}
         }
      });
   }
   
   function openMessageDiaglog(message) {
      $('#spanMessage').text(message);
      $("#dialog-message").dialog({
         resizable: false,
         draggable: false,
         modal: true,
         buttons: {
            Ok: function() {
               $(this).dialog("close");
            }
         }
      });
   }

   function updateProfile() {
      $.ajax({
         url : "<c:url value='/ajax/client/update' />",
         type : "POST",
         data: $('#clientForm').serialize(),
         dataType : "html",
         success : function(data) {
            $("#clientProfile").html(data);
            if($(data).first().attr("id") != "error") {
               openMessageDiaglog("Client details have been updated successfully.");
            }
         },
         error : function() {
            alert("Failure args: " + arguments);
         }
      });
   }

   function updateSite() {
	      $.ajax({
	         url : "<c:url value='/ajax/client/site/update' />",
	         type : "POST",
	         data: $('#siteForm').serialize(),
	         dataType : "html",
	         success : function(data) {
	            $("#sitePortlet").html(data);
	            if($(data).first().attr("id") != "error") {
	               openMessageDiaglog("Site details have been updated successfully.");
	            }
	         },
	         error : function() {
	            alert("Failure args: " + arguments);
	         }
	      });
	   }
   
   function updateUser() {
      $.ajax({
         url : "<c:url value='/ajax/client/${id}/user/update?userID=${userForm.id}' />",
         type : "POST",
         data: $('#userForm').serialize(),
         dataType : "html",
         success : function(data) {
            $("#userProfile").html(data);
            if($(data).first().attr("id") != "error") {
               openMessageDiaglog("The client's administrator account has been updated successfully.");
            }
         },
         error : function() {
            alert("Failure args: " + arguments);
         }
      });
   }
   
   function deleteClient() {
      $('#dialog-confirm').dialog('close');

      $.ajax({
         url : "<c:url value='/ajax/client/${clientID}/delete' />",
         type : "POST",
         data : {},
         dataType : "html",
         success : function(data) {
            window.location.replace("<c:url value='/clients' />");
         },
         error : function(){
            alert('error');
         }
      });
   }
</script>

</head>

<body>
   <div class="cubeTitleWrapper">
      <span class="cube_title">Client</span>
   </div>

   <div class="cube">
      <div>
         <div class="contentwrapper">
            <div class="contentcolumn">
               <div class="innertube">
                  <h2 class="userDefinedBg curved">Client Details</h2>
                  <div class="contentBlock">
                     <div id="clientProfile"><jsp:directive.include file="/WEB-INF/pages/client_profile_form.jsp" /></div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>

                  <h2 class="userDefinedBg curved">Site Details</h2>
                  <div class="contentBlock">
                     <div id="sitePortlet"><jsp:directive.include file="/WEB-INF/pages/site_form.jsp" /></div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>

                  <h2 class="userDefinedBg curved">Administrator Account</h2>
                  <div class="contentBlock">
                     <div id="ajax-loader" style="position: absolute;"><img src="<c:url value='/images/ajax-loader.gif' />" /></div>
                     <div id="userProfile"><jsp:directive.include file="/WEB-INF/pages/user_profile_form.jsp" /></div>
                  </div>
                  <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
               </div>
            </div>
         </div>

         <div class="rightcolumn">
            <div class="innertube">
               <h2 class="userDefinedBg"><span class="right_end"><span class="start">Tools</span></span></h2>
               <div class="contentBlock">
                  <ul class="toolbox userDefinedColor">
                     <li class="delete"><a class="add_link delete" href="javascript:openDeleteDiaglog()">Delete this Client</a></li>
                  </ul>
               </div>
               <div class="contentBlock_bottom"><span class="right_end"><span></span></span></div>
            </div>
         </div>
      </div>
   </div>

   <div id="dialog-message" title="Update success" style="display: none;">
      <p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 15px 0;"></span><span id="spanMessage">The group's permissions have been updated successfully.</span></p>
   </div>
   <div id="dialog-confirm" title="Delete this client?" style="display: none;">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This client will be permanently deleted and cannot be recovered. Are you sure?</p>
   </div>
</body>
</html>